<template>
    <div class="app-container">
        <div class="filter-container">
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                新增分类
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column label="分类ID" prop="id" align="center" width="80" />
            <el-table-column label="分类名称" prop="name" align="center" />
            <el-table-column label="排序" prop="sort" align="center" width="80" />
            <el-table-column label="状态" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
                        {{ scope.row.status === 1 ? '启用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center" width="180" />
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/编辑分类对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="temp.name" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="temp.sort" :min="0" :max="999" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="temp.status">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getCategoryList, createCategory, updateCategory, deleteCategory } from '@/api/shop'

export default {
    name: 'Category',
    data() {
        return {
            list: [],
            listLoading: false,
            dialogVisible: false,
            dialogTitle: '',
            temp: {
                id: undefined,
                name: '',
                sort: 0,
                status: 1
            },
            rules: {
                name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
                sort: [{ required: true, message: '请输入排序号', trigger: 'blur' }],
                status: [{ required: true, message: '请选择状态', trigger: 'change' }]
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.listLoading = true
            try {
                const { data } = await getCategoryList()
                this.list = data
            } catch (error) {
                console.error('获取分类列表失败:', error)
            }
            this.listLoading = false
        },
        handleCreate() {
            this.dialogTitle = '新增分类'
            this.dialogVisible = true
            this.temp = {
                id: undefined,
                name: '',
                sort: 0,
                status: 1
            }
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        handleUpdate(row) {
            this.dialogTitle = '编辑分类'
            this.dialogVisible = true
            this.temp = Object.assign({}, row)
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        async handleDelete(row) {
            try {
                await this.$confirm('确认删除该分类吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                await deleteCategory(row.id)
                this.$message.success('删除成功')
                this.getList()
            } catch (error) {
                if (error !== 'cancel') {
                    console.error('删除分类失败:', error)
                    this.$message.error('删除失败')
                }
            }
        },
        async submitForm() {
            this.$refs['dataForm'].validate(async (valid) => {
                if (valid) {
                    try {
                        if (this.temp.id) {
                            await updateCategory(this.temp)
                        } else {
                            await createCategory(this.temp)
                        }
                        this.$message.success(this.temp.id ? '修改成功' : '新增成功')
                        this.dialogVisible = false
                        this.getList()
                    } catch (error) {
                        console.error(this.temp.id ? '修改分类失败:' : '新增分类失败:', error)
                        this.$message.error(this.temp.id ? '修改失败' : '新增失败')
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
.filter-container {
    padding-bottom: 10px;
}
</style> 